<template>
	<view>
		<view class="bindingWx">
			<view class="bindingWx_text">
				<text>绑定Apple{{' '}}ID</text>
			</view>
		</view>
		<view class="login_img">
			<image src="http://106.14.56.171:15016/images/blank/bindiOS.png" mode="widthFix"></image>
			<view class=""><text>你尚未绑定Apple{{' '}}ID，绑定登录更便捷</text></view>
		</view>
		<view class="login">
			<view @click="bindIos"><text>绑定Apple{{' '}}ID</text></view>
		</view>
		<Loading :loadingShow="loading"></Loading>
	</view>
</template>

<script>
	import Loading from '@/components/loading/loading.vue'
	export default {
		data() {
			return {
				loading: false, // 加载中
			};
		},
		components: {
			Loading,
		},
		methods: {
			bindIos() {
				let _that = this
				uni.login({
					provider: 'apple',
					success: function(loginRes) {
						// 登录成功  
						uni.getUserInfo({
							provider: 'apple',
							success(res) {
								// 获取用户信息成功  
								if (res.errMsg == 'getUserInfo:ok') {
									_that.$httpNew
										.post('authApi/user/bindIOSInput', {
											openId: res.userInfo.openId
										}).then(resIos => {
											console.log(resIos, '苹果信息成功');
											if (resIos == null) {
												uni.showToast({
													title: '绑定成功',
													icon: 'none'
												});
												this.loading = true
												uni.navigateBack({
													url: '/pages/user/setting'
												})
											}
										})
								}
							}
						})
					},
					fail: function(err) {
						console.log(err)
					}
				});

			}
		}
	};
</script>

<style lang="less" scpoed>
	.bindingWx {
		padding: 0 40rpx;
	}

	.bindingWx text {
		color: #000;
		font-weight: 500;
		font-size: 50rpx;
		display: block;
		line-height: 250rpx;
	}

	.bindingWx_text {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.login_img {
		width: 100%;
		height: 300rpx;
		text-align: center;

		>view {
			margin-top: 20rpx;
		}
	}

	.login_img image {
		width: 80%;
	}

	.login_img text {
		font-size: 31rpx;
		font-weight: 400;
		color: #6c6c6c;
	}

	.login {
		margin-top: 110rpx;
		width: 100%;
		height: 140rpx;
		text-align: center;

		// background-color: aqua;
		>view {
			margin: auto;
			line-height: 90rpx;
			color: #fff;
			font-size: 36rpx;
			margin-top: 180rpx;
			width: 90%;
			height: 90rpx;
			background-color: #c5001a;
			border-radius: 50rpx;
		}


	}

	.login .login_btn {
		line-height: 90rpx;
		color: #fff;
		font-size: 36rpx;
		margin-top: 180rpx;
		width: 90%;
		height: 90rpx;
		background-color: #c5001a;
		border-radius: 50rpx;
	}
</style>